<template>
  <!-- 归档信息管理页面 -->
  <div class="specificationUp">
    <!-- 头部 -->
    <div class="info-top">
      <div class="info-top-left">
        <div class="line"></div>
        <span class="fileinfo">标准规范上传</span>
        <div class="info-top-right">
          <el-button
            type="primary"
            class="btn-lanse"
            :disabled="disabled"
            @click="saveDate"
            ><i class="el-icon-check el-icon--left"> 确定</i></el-button
          >
          <el-button class="close" @click="closeFN">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="divider">
      <el-divider></el-divider>
    </div>
    <!-- 中间 -->
    <div class="info-center">
      <span class="info-center-text">文件信息</span>
      <div class="info-center-form">
        <input
          v-show="false"
          type="file"
          id="fileInput"
          @change="submitUpload"
          name="file"
          ref="file"
        />
        <el-form
          style="width: 60%"
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="上传:" class="info-center-form-text">
            <el-button
              type="primary"
              size="mini"
              class="btn-lanse"
              style="width: 100px; height: 40px"
              @click="upload"
              :disabled="disabled"
              ><i class="el-icon-check el-icon--left"> 上传</i></el-button
            >
          </el-form-item>
          <el-form-item label="文件:" class="info-center-form-text">
            {{ formLabelAlign.file.name }}
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 中间 -->
    <div class="info-center">
      <span class="info-center-text">基本信息</span>
      <div class="info-center-form">
        <el-form
          style="width: 60%"
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="文件类型:" class="info-center-form-text">
            <el-select
              class="info-center-form-input"
              v-model="formLabelAlign.fileType"
              placeholder="请选择文件类型"
            >
              <el-option label="图片" value="1"></el-option>
              <el-option label="视频" value="2"></el-option>
              <el-option label="文档" value="3"></el-option>
              <el-option label="音频" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建者:" class="info-center-form-text">
            <el-input
              v-model="formLabelAlign.creator"
              class="info-center-form-input"
              placeholder="请输入测试人员标识或姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注说明:" class="info-center-form-text">
            <el-input
              v-model="formLabelAlign.fileRemark"
              class="info-center-form-input"
              placeholder="请输入验证规则"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "left",
      // title: "新建信息",
      formLabelAlign: {
        fileType: "",
        creator: "",
        fileRemark: "",
        file: "",
      },
      disabled: false,
    };
  },

  activated() {},
  mounted() {},
  methods: {
    submitUpload(e) {
      let file = e.target.files[0];
      this.formLabelAlign.file = file;
      console.log(file);
    },
    upload() {
      this.$refs.file.value = "";
      this.formLabelAlign.file = "";
      document.getElementById("fileInput").click();
    },
    closeFN() {
      this.$router.go(-1);
      this.clear();
    },
    clear() {
      this.formLabelAlign = {
        fileType: "",
        creator: "",
        fileRemark: "",
        file: "",
      };
    },
    saveDate() {
      console.log(
        this.formLabelAlign.fileType == "",
        this.formLabelAlign.creator == "",
        this.formLabelAlign.fileRemark == "",
        this.formLabelAlign.file == ""
      );
      if (
        this.formLabelAlign.fileType == "" ||
        this.formLabelAlign.creator == "" ||
        this.formLabelAlign.fileRemark == "" ||
        this.formLabelAlign.file == ""
      ) {
        this.$message({
          showClose: true,
          message: "信息不能为空",
          type: "warning",
        });
        return;
      }
      this.disabled = true;
      let formData = new FormData();
      formData.append("multipartFiles", this.formLabelAlign.file);
      this.$api
        .BzfileUpload(
          this.formLabelAlign.creator,
          this.formLabelAlign.fileRemark,
          this.formLabelAlign.fileType,
          formData
        )
        .then((res) => {
          if (res.code == "200") {
            this.disabled = false;
            this.$router.push({
              path: "/specification",
            });
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
          } else {
            this.disabled = false;
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((res) => {
          this.disabled = false;
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-button--primary {
  width: 110px;
  height: 44px;
}
.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  width: 110px;
  height: 44px;
}
.specificationUp {
  overflow: hidden;
  .el-form-item {
    margin-bottom: 10px;
  }

  //头部
  .info-top {
    margin-top: 20px;
    margin-left: 30px;
    .info-top-left {
      .line {
        width: 4px;
        height: 20px;
        background: #3386fe;
        opacity: 1;
        border-radius: 0px;
        float: left;
        margin-top: 2px;
      }
      .fileinfo {
        margin-left: 10px;
        width: 88px;
        height: 30px;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
    }
    .info-top-right {
      float: right;
      margin-top: -10px;
      margin-right: 30px;
    }
  }
  //中间
  .info-center {
    margin-left: 45px;
    .info-center-text {
      width: 72px;
      height: 25px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #3386fe;
      opacity: 1;
    }
    .info-center-form {
      margin-top: 10px;
      .info-center-form-text {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
      .info-center-form-input {
        width: 446px;
        height: 44px;
      }
    }
  }
  //底部
  .info-bottom {
    margin-left: 45px;
    .info-bottom-text {
      width: 72px;
      height: 25px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #3386fe;
      opacity: 1;
    }
    .info-bottom-box {
      margin-top: 10px;
      width: 815px;
      height: 350px;
      background: rgba(240, 240, 246, 0.5);
      border: 1px solid #d8d8d8;
      opacity: 1;
      border-radius: 5px;
    }
  }
}
</style>